<template>
	<Container>
		<view class="header">
			<image class="image" :class="{ articleLight: questionPress }" :src="assignment.comparedArticle.imageUrl" mode="aspectFit"></image>
			<AudioIcon @iconTap="iconTap" :questionPress="questionPress" />
		</view>
		<Question :question="assignment.questionName" />
		<view
			class="select"
			hover-class="touch"
			hover-stay-time="300"
			:class="{ error: chooses[index] === 'error', success: chooses[index] === 'success' }"
			v-for="(item, index) in assignment.optionArticles"
			:key="index"
			@tap="tap(item, index)"
		>
			{{ item.text }}
			<SuccessIcon v-if="chooses[index] === 'success'" />
		</view>
	</Container>
</template>

<script>
import { mixins } from '../../../common/mixins/assignmentDefault.js'
import AudioIcon from '../audioIcon.vue'
import Question from '../questionName.vue'
import Container from '../container.vue'
import SuccessIcon from '../successIcon.vue'
export default {
	mixins: [mixins],
	components: { AudioIcon, Question, Container, SuccessIcon },
	methods: {
		tap: function(item, index) {
			this.touchAudio()
			if (this.isComplete) return
			this.isComplete = true
			if (item.isMatched) {
				this.optionStatus('success', index)
				this.$parent.next({
					isSure: true
				})
			} else {
				this.optionStatus('error', index)
				this.$parent.next()
			}
		}
	}
}
</script>

<style scoped lang="stylus">
.header
	height 50vh
	width 720rpx
	border-radius 70rpx
	background white
	border 12rpx solid #FCC77D
	box-sizing border-box
	margin 1.5vh 0 5vh 0
	display flex
	justify-content center
	align-items center
	position relative
	.image
		width 75%
		height 75%
.select
	display flex
	justify-content center
	align-items center
	width 380rpx
	height 100rpx
	border 7rpx solid #FFCD86
	border-radius 80rpx
	box-sizing border-box
	font-size 35rpx
	letter-spacing 3rpx
	margin 2vh auto
	position relative
	transition all 0.3s
</style>
